<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--约束视口宽度，每一个手机根据自身进行设置，必须添加-->
		<meta name="viewport" content="width=device-width" />
		<title>携程移动端</title>
		<!--外链式-->
		<!--清除默认样式-->
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<!--首页样式-->
		<link rel="stylesheet" type="text/css" href="../css/0605_携程移动端.css"/>
		
	</head>
	<body>
		<!--min-width：最小宽度，当视口<320px，盒子宽度不再改变，渲染的是320px
			max-width：最大宽度，当视口>540px，盒子宽度不再改变，渲染的是540px
			当盒子宽度在320-540之间渲染的是width
		-->
		
		<!--header开始-->
		<div class="header">
			<!--固比模型：比 搜索框-->
			<div class="search">
				<span>搜索：目的地/酒店/景点/航班号</span>
			</div>
			<!--固 注册-->
			<a href="#" class="login">我的</a>
		</div>
		
		<!--banner开始-->
		<div class="banner">
		<div class="pic">
			<img src="../img/banner.png" alt="顶部图片">
		</div>
		<div class="circles">
			<ol>
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>
		</div>
		
		<!--主导航开始-->
		<div class="main-nav">
			<div class="row">
				<ul>
					<li><a href="">酒店</a></li>
					<li><a href="">海外酒店</a></li>
					<li><a href="">团购</a></li>
					<li><a href="">特价酒店</a></li>
					<li><a href="">民宿·客栈</a></li>
				</ul>
			</div>
			<div class="row">
				<ul>
					<li><a href="">机票</a></li>
					<li><a href="">海外酒店</a></li>
					<li><a href="">团购</a></li>
					<li><a href="">特价酒店</a></li>
					<li><a href="">民宿·客栈</a></li>
				</ul>
			</div>
			<div class="row">
				<ul>
					<li><a href="">旅游</a></li>
					<li><a href="">海外酒店</a></li>
					<li><a href="">团购</a></li>
					<li><a href="">特价酒店</a></li>
					<li><a href="">民宿·客栈</a></li>
				</ul>
			</div>
			<div class="row">
				<ul>
					<li><a href="">景点·玩乐</a></li>
					<li><a href="">美食林</a></li>
					<li><a href="">团购</a></li>
					<li><a href="">特价酒店</a></li>
					<li><a href="">电话卡</a></li>
					<li><a href="">民宿·客栈</a></li>
				</ul>
			</div>
		</div>
		
		<!--侧导航开始-->
		<div class="sub-nav">
			<ul>
				<li><a href="">自由行</a></li>
				<li><a href="">微领队</a></li>
				<li><a href="">一日游</a></li>
				<li><a href="">高端游</a></li>
				<li><a href="">自由行</a></li>
				<li><a href="">微领队</a></li>
				<li><a href="">一日游</a></li>
				<li><a href="">高端游</a></li>
				<li><a href="">自由行</a></li>
				<li><a href="">微领队</a></li>
				<li><a href="">一日游</a></li>
				<li><a href="">高端游</a></li>
			</ul>
		</div>
		
		<!--特卖汇开始-->
		<div class="sale">
			<!-- 标题 -->
			<div class="title">
				<!-- 不用不能看到文字 -->
				<h3>特卖汇</h3>
				<a href="" class="hongbao">领红包再下单</a>
			</div>
			<!-- 内容区域 -->
			<div class="content">
				<!-- 左侧爆款 -->
				<div class="hot">
					<div class="pic">
						<img src="../img/pic.jpg" alt="">
						<!-- 特殊形状 -->
						<span>爆款</span>
					</div>
					<div class="txt">
						<p class="info">云南昆明+大理+丽江6日5晚跟团游(4钻)·【携程贵宾独立发团】金秋错峰悦心游+雪山冰川公园登顶+洱海大游船+花海畅游.海边骑行+高尔夫挥杆体验+世界自然遗产石林+魅力双廊+赏丽江风情表演+温泉SPA</p>
						<p class="price"><b>¥</b>1499<i>起</i><span>2.7折</span></p>
					</div>
				</div>
				<!-- 右侧特价 -->
				<div class="tejia">
					<div class="top">
						<p>千款特价</p>
						<p>走过路过不错过</p>
					</div>
					<div class="bottom">
						<div class="jingxuan">
							<p>境外精选</p>
							<p><span>百元</span>出境游</p>
						</div>
						<div class="wanle">
							<p>周边玩乐</p>
							<p><span>百元</span>出境游</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		
	</body>
</html>
